<template>
  <div class="login">
    <div class="top">
      <van-nav-bar title="注册" left-arrow @click-left="onClickLeft" />
    </div>
    <van-cell-group>
      <van-field v-model="value" label="用户名" placeholder="请输入用户名" />
      <van-field
        v-model="password"
        type="password"
        label="密码"
        placeholder="请输入密码"
      />
      <van-field
        v-model="password"
        type="password"
        label="确认密码"
        placeholder="请再次输入密码"
      />
    </van-cell-group>
    <div class="btn">
      <van-button size="small" round>注册</van-button>
    </div>
    <div class="a"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      password: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped lang="less">
.login {
  background-color: #fff;
  .top {
    padding-top: 24px;
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
  }
  .btn {
    margin-top: 40%;
  }
  .a {
    padding-bottom: 31%;
  }
}
/deep/ .van-button--small {
  width: 90%;
  height: 52px;
  margin-left: 5%;
  text-align: center;
  background-color: #d81e06;
  color: #fff;
  font-size: 20px;
}
/deep/ .van-cell {
  font-size: 20px;
  line-height: 20px;
}
/deep/ .van-field__label {
  width: 80px;
}
/deep/ .van-nav-bar__content {
  height: 50px;
}
/deep/ .van-nav-bar__title {
  font-size: 24px;
}
/deep/ .van-nav-bar__arrow {
  font-size: 24px;
}
/deep/ .van-icon {
  color: black;
}
</style>
